import React from 'react';
import { Row, Col, Form, InputNumber, Input, Button, Table, Select, Modal,Popconfirm, message} from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'


const FormItem = Form.Item;
const view= "view"

export default Form.create({wrappedComponentRef: true})(class EditRecAcc extends React.Component {
	constructor(props) {
		super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
        }
	}

    handleCancel = () => {
        this.props.form.resetFields()
        this.setState({open:false})
        this.props.dispatch({
            type: 'customerManage/setRecAcc',
            payload: {
                recAcc: "",
            }
        });
    }

    handleOpen = (type) => {
        this.state.type = type;
        this.setState({open: true})
    }

    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
            if (errors) return;

            if(this.state.type == view){
                return;
            }

            let linkman = values;
            let type = "";
            if (this.state.type == "add") {
                type = "customerManage/addRecAcc";

            } else if (this.state.type == "edit") {
                type = "customerManage/updateRecAcc";

            }

            this.props.dispatch({
                type: type,
                payload: {
                    cstid : this.props.cstId,
                    id : dataSource.id,
                    payeename : values.payeename,
                    payeeno : values.payeeno,
                    openbank : values.bankCode,
                    bankbranch : values.bankbranch,
                    onSuccess:()=>{
                        this.handleCancel();
                    }

                }
            })


        })
    }

	render() {
		const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let footer=[
            <Popconfirm onConfirm={this.handleConfirm.bind(this, true)} cancelText="否"  okText="是"
                        placement="leftTop" title={'为了保持存量数据的一致性，收款人账户新增之后不能修改只能删除，请确认！'}>
                <Button key="ok" size="large">确定</Button>
            </Popconfirm>,
            <Button key="cancel" size="large" onClick={this.handleCancel.bind(this, true)}>取消</Button>
        ];
        return (
            <Modal visible={this.state.open} title={"添加收款人账户"} width={620} wrapClassName="vertical-center-modal" maskClosable={false}
                footer={footer} onOk={this.handleConfirm} onCancel={this.handleCancel}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="收款人名称" hasFeedback>
                                {getFieldDecorator('payeename', {
                                    rules: [{
                                        required: true, message: '请输入收款人名称'
                                    }],
                                    initialValue: dataSource.payeename
                                })(
                                    <Input maxLength="20" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="收款人账户" hasFeedback>
                                {getFieldDecorator('payeeno', {
                                    rules: [{
                                        required: true, message: '请输入收款人账户'
                                    }],
                                    initialValue: dataSource.payeeno
                                })(
                                    <InputNumber maxLength="30" disabled={this.props.disabled || this.state.type == view} style={{ width: '100%' }}/>
                                )}
                            </FormItem></Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开户银行" hasFeedback>
                                {getFieldDecorator('bankCode', {
                                    rules: [{
                                        required: true, message: '请输入开户银行'
                                    }],
                                    initialValue: R.isNil(dataSource.openbank) ? '' :dataSource.openbank+''
                                })(
                                    <BizParams sprCode={"bankCode"} style={{width:'100%'}} blank={true}/>
                                    )}
                            </FormItem></Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="开户支行" hasFeedback>
                                {getFieldDecorator('bankbranch', {
                                    rules: [{
                                        required: true, message: '请输入开户支行'
                                    }],
                                    initialValue: dataSource.bankbranch
                                })(
                                    <Input maxLength="30" disabled={this.props.disabled || this.state.type == view}/>
                                )}
                            </FormItem></Col>
                    </Row>
                </Form>
            </Modal>
        );
	}
})


// WEBPACK FOOTER //
// ./public/src/components/order/components/EditRecAcc.js